<template>
	<view>
		<view class="item">
			<view class="left">
				<text>发布的人:</text>
			</view>
			<view class="right">
				<image :src="info.avatar" mode="" @tap="toPersonal" ></image>
			</view>
		</view>

		<view class="item">
			<view class="left">
				<text>报名情况:</text>
			</view>
			<view class="right">
				<view>男<text>{{ info.addman }}</text>/{{ info.man }}</view>
				<view>女<text>{{ info.addwoman }}</text>/{{ info.woman }}</view>
			</view>
		</view>

		<view class="item">
			<view class="left">
				<text>约会主题:</text>
			</view>
			<view class="right">
				{{ info.title }}
			</view>
		</view>

		<view class="item">
			<view class="left">
				<text>约会时间:</text>
			</view>
			<view class="right">
				{{ info.engagementtime }}
			</view>
		</view>

		<view class="item-place">
			<view class="place-left">
				<text>约会地点:</text>
			</view>
			<view class="place-right">
				{{ doStr(info.place) }}
			</view>
		</view>

		<view class="detail">
			约会简介:{{ info.describe }}
		</view>

		<view class="foot">
			<view class="ft-left">
				<i class="iconfont iconruyuanjilu_fuzhi icon"></i>
				<input type="number" maxlength="11" value="" placeholder="请留下你的联系方式" @blur="iptBlur" @confirm="iptConfirm" />
			</view>
			<view :class="[info.join?'ft-right-sub':'ft-right']" @tap="doSomething">{{ info.join?'已报名':'我想赴约' }}</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token','userId'])
		},
		data() {
			return {
				id: '',
				info: {},
				phone: '',
			};
		},
		//分享给个人
		onShareAppMessage() {
			return {
				title: '青年交友',
				imageUrl:'https://friend.tanshishang.cn/assets/img/shareImg.png',
				path:'/pages/index/index'
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
			}


		},
		onShow() {
			this.getData();
		},
		methods: {
			//前往个人详情
			toPersonal(){
				// console.log(this.info);
				if(this.info.userid !== this.userId){
					if(this.info.gender==1){
						//男
						uni.navigateTo({
							url: '/pages/recommend/personal?type=0&id=' + this.info.userid
						})
					}else{
						//女
						uni.navigateTo({
							url: '/pages/recommend/personal?type=1&id=' + this.info.userid
						})
					}
				}else{
					uni.switchTab({
						url:'/pages/my/my'
					})
				}
			},
			//获取数据
			async getData() {
				try {
					let params = {
						token: this.token,
						orderId: this.id
					};
					let res = await this.$request.request.get('/api/engagement/detail', params)
					console.log(res);
					if (res.code == 200) {
						this.info = res.data;
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			iptBlur(e) {
				let num = e.detail.value;
				this.phone = num;
			},
			iptConfirm(e) {
				let num = e.detail.value;
				this.phone = num;
			},
			//点击我想赴约
			doSomething() {
				uni.showLoading({
					title:'正在提交...',
					mask:true
				});
				setTimeout(()=> {
					uni.hideLoading();
					if(this.info.join){
						uni.showToast({
							title:'您已报名,请勿重复申请!',
							icon:'none',
							mask:true
						})
					}else if (this.phone.length == '' || this.phone.length < 11) {
						uni.showToast({
							title:'请输入正确的11位手机号!',
							icon:'none',
							mask:true
						})
					}else{
						this.doRequest();
					}
				},500)

			},
			async doRequest() {
				try {
					let params = {
						token: this.token,
						id: this.id,
						phone: this.phone
					};
					let res = await this.$request.request.post('/api/engagement/enlist', params)
					console.log(res);
					if (res.code == 200) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							confirmText: '我知道了',
							success: (res) => {
								console.log(res);
							}
						});
						//重新获取数据
						this.getData();
					}
				} catch (err) {
					//未开通VIP
					if (err.code == 4) {
						uni.showModal({
							title: '温馨提醒',
							content: '您还未开通VIP，仅有VIP才能进行此项操作',
							showCancel: true,
							confirmText: '开通VIP',
							success: (res) => {
								// console.log(res);
								if (res.confirm) {
									this.toPay();
								} else if (res.cancel) {
									console.log('用户点击取消');
								}

							}
						});
					}else{
						this.$request.error(err, this);
					}
				}
			},
			//VIP支付
			async toPay() {

				try {
					let params = {
						token: this.token
					};
					let res = await this.$request.request.post('/api/user/renewal', params)
					console.log(res);
					if (res.code == 200) {
						//跳转支付页
						uni.navigateTo({
							url: '/pages/my/payInfo?orderNo=' + res.data.orderNo + '&price=' + res.data.price 
						})
					}
				} catch (err) {
					this.$request.error(err, this);
				}
			},
			//位置切割
			doStr(e){
				if(e){
					let arr = e.split('-');
					if(arr.length>1){
						return arr[1]
					}else{
						return arr[0]
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import 'dateDetail.scss'
</style>
